<template>
  <view class="index-header">
    <view class="index-selected">
      <view class="index-time">
        <block v-for="v in timeList" :key="v.value">
          <view class="time-item flex-center" :class="{ 'time-active': vdata.timeSelected == v.value }" @tap="changeTimeFunc(v.value)">
            {{ v.title }}
          </view>
        </block>
      </view>
      <view class="index-scan flex-center" @click="scanFunc">
        <image src="/static/iconImg/icon-scan-index.svg" mode="scaleToFill" />
      </view>
    </view>
    <view class="receipts-money">
      <text class="money-title">成交金额 (元)</text>
      <view class="money-num">{{ vdata.payAmount <= -1 ? '--' : cal.cert2Dollar(vdata.payAmount) }}</view>
    </view>
    <view class="money-list">
      <view class="money-item">
        <text class="money-title">成交笔数</text>
        <view class="money-num">{{ vdata.payCount <= -1 ? '--' : vdata.payCount }}</view>
      </view>
      <view class="money-item">
        <text class="money-title">退款金额 (元)</text>
        <view class="money-num">{{ vdata.refundAmount <= -1 ? '--' : cal.cert2Dollar(vdata.refundAmount) }}</view>
      </view>
      <view class="money-item" >
        <text class="money-title">退款笔数</text>
        <view class="money-num">{{ vdata.refundCount <= -1 ? '--' : vdata.refundCount }}</view>
      </view>
    </view>
    <view class="money-list" v-if="vdata.memberIsShow">
      <view class="money-item">
        <text class="money-title">会员充值(元)</text>
        <view class="money-num">{{ cal.cert2Dollar(memberData.payAmount) }}</view>
      </view>
      <view class="money-item">
        <text class="money-title">会员消费(元)</text>
        <view class="money-num">{{ cal.cert2Dollar(Math.abs(memberData.changeAmount)) }}</view>
      </view>

      <view class="money-item">
        <text class="money-title">会员消费笔数</text>
        <view class="money-num">{{memberData.changeCount }}</view>
      </view>
    </view>
    <button v-if="ak.ent.has('ENT_C_QUICKCASHIER')" class="quick-money flex-center" @tap="go.to('PAGES_QUICK_PAY')">快捷收银</button>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { $indexStatistics, $memberInfoCount } from '@/http/apiManager.js'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import ak from '@/commons/utils/ak.js'
import ent from '@/commons/utils/ent.js'
import unionScan from '@/commons/utils/unionScan.js'
import storageManage from '@/commons/utils/storageManage.js'

onMounted(()=>{
    vdata.memberIsShow = ent.has('ENT_MCH_MEMBER')&& storageManage.userInfo().isHasMemberEnt
    if(ent.has('ENT_MCH_MEMBER') && storageManage.userInfo().isHasMemberEnt){
        getMemberData()
    }
})
const emits = defineEmits(['click'])
const timeList = [
  { title: '今天', value: 'today' },
  { title: '昨天', value: 'yesterday' },
  { title: '近7天', value: 'near2now_7' },
  { title: '近30天', value: 'near2now_30' },
]

const vdata = reactive({
  timeSelected: 'today', // 当前时间选择器的
  payAmount: -1, // 实收金额
  payCount: -1, // 交易笔数
  refundAmount: -1, // 退款金额
  refundCount: -1, // 退款笔数
  memberIsShow:false //是否开启会员模块
})
const memberData = reactive({})
// 切换 时间卡片
function changeTimeFunc(val) {
  vdata.timeSelected = val
  refData()
  if (vdata.memberIsShow) {
        getMemberData()
    }
}
// 根据选择请求数据
function refData() {
  // 获取 统计数据
  $indexStatistics(vdata.timeSelected).then(({ bizData }) => {
    vdata.payAmount = bizData.dayCount.payAmount
    vdata.payCount = bizData.dayCount.payCount
    vdata.refundAmount = bizData.dayCount.refundAmount
    vdata.refundCount = bizData.dayCount.refundCount
  })
}

// 扫码动作
function scanFunc() {
  unionScan.scan(true).then((res) => {
    // 登录类型
    if (res.type == unionScan.QR_TYPE_LOGIN) {
      return go.to('PAGES_SCAN_LOGIN', { qrcodeNo: res.originQrVal })
    }

    // 二维码
    if (res.type == unionScan.QR_TYPE_QRC) {
      return go.to('PAGES_APP_CODE_BIND', { qrcId: res.bizValue })
    }
  })
}
const getMemberData = () => {
  $memberInfoCount({ queryDateRange:  vdata.timeSelected }).then(({bizData}) => {
    Object.assign(memberData, bizData)
  })
}
defineExpose({ refData })
</script>

<style lang="scss" scoped>
.index-header {
  width: 680rpx;
  margin: 0 auto;
  transform: translateY(30rpx);
  margin-bottom: 25rpx;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: $J-b-r32;
  background: $jeepay-bg-primary;
  backdrop-filter: blur(20rpx);
  box-shadow: 0 50rpx 70rpx -60rpx rgba(0, 65, 164, 0.5);
  .index-selected {
    display: flex;
    justify-content: space-between;
    .index-time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 490rpx;
      height: 90rpx;
      border-radius: 20rpx;
      padding: 10rpx;
      background-color: rgba($color: #fff, $alpha: 0.1);
      .time-item {
        width: 120rpx;
        height: 100%;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.75);
      }
      .time-active {
        background-color: $J-bg-ff;
        color: $J-color-t21;
        border-radius: 12rpx;
      }
    }
    .index-scan {
      width: 110rpx;
      height: 110rpx;
      border-radius: 20rpx;
      background-color: rgba($color: #fff, $alpha: 0.1);
      image {
        width: 41rpx;
        height: 35rpx;
      }
    }
  }
  .receipts-money {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30rpx 0;
    color: $J-color-tff;
    .money-num {
      font-size: 70rpx;
      font-weight: 500;
    }
  }
  .money-list {
    display: flex;
    justify-content: space-between;
    padding: 0 72rpx;
    margin-bottom: 50rpx;
    text-align: center;
    color: $J-color-tff;
    .money-item {
      .money-num {
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }
  .money-title {
    margin-bottom: 10rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: $J-color-tSff;
  }
  .quick-money {
    height: 110rpx;
    border-radius: 20rpx;
    color: $J-color-t29;
  }
}
</style>
